<template>
	<div class="system-role-container layout-padding">
		<el-row>
			<el-col :xs="24" :sm="24">
				<el-card shadow="hover" header="实验检索">
					<TableSearch :search="state.search" @search="onSearch" ref="searchRef" />
				</el-card>
			</el-col>
			<el-col :xs="24" :sm="24">
				<el-card shadow="hover" class="bottom-card">
					<template #header>
						<span>学生互评</span>
					</template>
					<div v-show="studentList.length == 0">
						<el-empty description="暂无数据" />
					</div>
					<el-row :gutter="35" v-for="(v, k) in studentList" :key="k" v-show="studentList.length != 0">
						<el-cow :xs="24" :sm="12" :md="8" :lg="8" :xl="6" class="mb20">
							<el-card shadow="hover" class="student-card">
								<el-card shadow="hover" class="name-card">
									<template #header>
										<span class="name">{{ v.name }}</span>
									</template>
									<ele-Avatar class="avatar" />
								</el-card>
								<div class="evaluation-button">
									<el-button round v-if="v.grade == -1" type="primary" @click="onOpenEditRole(studentList[k], experiment_id)">去评分</el-button>
									<el-button round v-else-if="v.grade != -1" disabled type="danger">已完成评分</el-button>
								</div>
							</el-card>
						</el-cow>
					</el-row>
				</el-card>
			</el-col>
		</el-row>
		<RoleDialog ref="roleDialogRef" />
	</div>
</template>

<script setup lang="ts" name="gradeEvaluation">
import { defineAsyncComponent, reactive, onMounted, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useUserInfo } from '/@/stores/userInfo';
const stores = useUserInfo();
const { userInfos } = storeToRefs(stores);
import { experimentInfo, gradeEvaluationInfo } from '/@/api/grade';

// 引入组件
const RoleDialog = defineAsyncComponent(() => import('/@/views/grade/evaluation/dialog.vue'));
const TableSearch = defineAsyncComponent(() => import('/@/views/grade/evaluation/search.vue'));

// 定义变量内容
const roleDialogRef = ref();
const experiment_id = ref('');
const studentList = ref([]);
const state = reactive({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
	search: [{ label: '实验名称', prop: 'experimentId', placeholder: '请选择实验名称', required: true, type: 'select', options: [] }],
});
// 打开修改角色弹窗
const onOpenEditRole = (row: Object, id: any) => {
	roleDialogRef.value.openDialog(row, id);
};
const onSearch = (data: EmptyObjectType) => {
	experiment_id.value = data.experimentId;
	gradeEvaluationInfo({ experiment_id: data.experimentId, evaluator_id: userInfos.value.Id })
		.then((res) => {
			if (res.code === '2000') {
				for (let i = 0; i < res.data.length; i++) {
					studentList.value.push({ name: res.data[i].student_name, grade: res.data[i].evaluated_grade, Id: res.data[i].evaluatee_id });
				}
			} else {
				ElMessage.error('获取小组互评信息失败!');
			}
		})
		.catch((err) => {
			ElMessage.error('获取小组互评信息失败!' + err);
		});
};

onMounted(() => {
	experimentInfo({ lesson_id: userInfos.value.lesson_id })
		.then((res: any) => {
			if (res.code === '2000') {
				state.search[0].options = res.data.map((item: any) => {
					return {
						label: item.experiment_name,
						value: item.experiment_id,
					};
				});
			} else {
				ElMessage.error('获取实验信息失败!');
			}
		})
		.catch((err: any) => {
			ElMessage.error('获取实验信息失败!' + err);
		});
});
</script>

<style scoped lang="scss">
.system-role-container {
	.system-role-padding {
		padding: 15px;
		.el-table {
			flex: 1;
		}
	}
	.bottom-card {
		height: 500px;
		overflow: auto;

		.student-card {
			width: 1220px;
			height: 200px;
			margin-left: 25px;
			.name-card {
				height: 150px;
				width: 150px;
				.name {
					padding-left: 35px;
				}
				.avatar {
					width: 80px;
					height: 80px;
					margin-left: 15px;
				}
			}
			.evaluation-button {
				float: right;
				margin-top: -80px;
			}
		}
	}
}
</style>
